<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>底部导航</title>
    <link rel="stylesheet" type="text/css" href="./css/api.css" />
    <link rel="stylesheet" type="text/css" href="./css/style.css" />
    <link rel="stylesheet" type="text/css" href="./css/aui.css" />
    <link rel="stylesheet" type="text/css" href="./icon/iconfont.css" />
    <style>
        header {
        }

        header ul li {
            opacity: 1;
            text-align: center;
            display: none;
            color: #323237;
            position: relative;
            font-size: 20px;
            margin: 0;
            height:3.6rem;
        }

        header ul li.active {
            display: block;
        }

        #footer {
            background-color: rgb(250, 250, 250);
        }

        #footer ul li {
            padding-top: 35px;
            padding-bottom: 4px;
            background: url() no-repeat center 2px;
            background-size: auto 30px;
            text-align: center;
        }

        #footer {
            background-color: rgb(250, 250, 250);
        }

        #footer ul li {
            padding-top: 35px;
            padding-bottom: 4px;
            background: url() no-repeat center 2px;
            background-size: auto 30px;
            text-align: center;
        }

        #footer ul li.active {
            color: #D39B51;
        }

        #footer ul li:nth-child(1) {
            background-image: url(./image/index.png);
        }

        #footer ul li:nth-child(2) {
            background-image: url(./image/order.png);
        }
        /*#footer ul li:nth-child(3){ background-image: url(./image/guang.png); }*/

        #footer ul li:nth-child(4) {
            background-image: url(./image/live.png);
        }

        #footer ul li:nth-child(5) {
            background-image: url(./image/member.png);
        }

        #footer ul li:nth-child(1).active {
            background-image: url(./image/index-active.png);
        }

        #footer ul li:nth-child(2).active {
            background-image: url(./image/order-active.png);
        }
        /*#footer ul li:nth-child(3).active{ background-image: url(./image/guang-active.png);}*/
        /*#footer ul li:nth-child(3)::after.active{ background-image: url(./image/guang-active.png);}*/

        #footer ul li:nth-child(4).active {
            background-image: url(./image/live-active.png);
        }

        #footer ul li:nth-child(5).active {
            background-image: url(./image/member-active.png);
        }

        .flex-con {
            overflow: auto;
        }

        .topstyle {
            color: #000;
            background-color: #fff;
        }

        .flex-wrap {}

        .guangchang {
            position: relative;
            overflow: visible
        }

        .guangchang:after {
            content: "";
            position: absolute;
            top: 0;
            left: 50%;
            margin: -33% -43%;
            width: 3.2rem;
            height: 3.2rem;
            background-image: url(./image/guang.png);
            background-size: 100%;
        }

        .guangchang.guangchang1:after {
            content: "";
            position: absolute;
            top: 0;
            left: 50%;
            margin: -33% -43%;
            width: 3.2rem;
            height: 3.2rem;
            background-image: url(./image/guang-active.png);
            background-size: 100%;
        }
        /*.guangchang:after::active{
          background-image: url(./image/guang-active.png);
        }*/
        .tabList {
            width: 100%;
            height: 3.6rem;
            overflow-x: auto!important;
            white-space: wrap;
            padding-top: 1.8rem;
            border-bottom:1px solid #eee;
            -webkit-overflow-scrolling: touch;
        }
        .tabList::-webkit-scrollbar {
            display: none
        }

        .tab_item {
            float: left;
            width: 16.5%;
            text-align: center;
            position: relative;
            color:rgb(150, 151, 151);
            font-size: 0.9rem;
        }

        .tab_item.active {
            color: rgb(211, 155, 81);
            font-size: 1rem;
        }
        .ab{
          position: absolute;
          bottom:-0.25rem;
          left:50%;
          margin-left: -1.5rem;
          width:3rem;
          height:3px;
          background-color: rgb(211, 155, 81);
        }
        #search {
            position: relative;
            padding: 0.3rem 0.8rem;
            line-height: 2.2rem;
            display: flex;
            justify-content: space-around;
            background-color: rgb(211, 155, 81)
        }
        input[type=search] {
            background: #FFF;
        }
        #search span {
            font-size: 0.8rem;
            color: #fff;
            line-height: 1.6rem
        }

        #search i {
            position: absolute;
            top: 0.1rem;
            left: 13.5rem;
            font-size: 1rem;
        }

        #search_input {
            width: 14rem;
            height: 1.6rem;
            border-radius: 1.6rem;
            text-align: left;
            padding-left: 1rem
        }
    </style>
</head>

<body>
    <div id="wrap" class="flex-wrap flex-vertical">
        <header>
            <ul>
                <li class="border-b">
                  <div id="aui-header" style="background-color:#D39B51;position:fixed;width:100%;height:3.6rem">
                    <div class="aui-searchbar" id="search" style="margin-top:1.3rem">
                        <input type="search" placeholder="请输入您想要搜索内容" id="search_input">
                        <i class="iconfont icon-seachx" id="searchText"></i>
                        <span id="quxiao">取消</span>
                    </div>
                  </div>
                </li>
                <li class="border-b topstyle active" id="eq1">
                  <div class="tabList">
                      <div style="width:200%" id="tabBox">
                          <!-- <div class="tab_item active " onclick="headerSwitchBtn(this)">客房<div class="ab"></div></div>
                          <div class="tab_item" onclick="headerSwitchBtn(this)">餐饮</div>
                          <div class="tab_item" onclick="headerSwitchBtn(this)">其他</div>
                          <div class="tab_item" onclick="headerSwitchBtn(this)">文化</div> -->
                      </div>
                  </div>
                </li>
                <li class="border-b topstyle" style="background-color:rgb(211, 155, 81);color:#fff;padding-top:1.5rem">广场</li>
                <li class="border-b" style="padding-top:1.5rem">直播</li>
                <li class="border-b" style="padding-top:1.5rem">我的</li>
            </ul>
        </header>
        <div id="main" class="flex-con">

        </div>
        <div id="footer" class="border-t">
            <ul class="flex-wrap">
                <li tapmode="hover" onclick="randomSwitchBtn( this );" class="flex-con active padtop">首页</li>
                <li tapmode="hover" onclick="randomSwitchBtn( this );" class="flex-con padtop">预订</li>
                <li tapmode="hover" onclick="randomSwitchBtn( this );" class="flex-con padtop guangchang">广场</li>
                <li tapmode="hover" onclick="randomSwitchBtn( this );" class="flex-con padtop">直播</li>
                <li tapmode="hover" onclick="randomSwitchBtn( this );" class="flex-con padtop">我的</li>
            </ul>
        </div>
    </div>
</body>

</html>
<script src="./lib/zepto.js"></script>
<script type="text/javascript" src="script/api.js"></script>
<script type="text/javascript" src="script/dns.js"></script>
<script type="text/javascript" src="script/jquery-3.3.1.js"></script>
<script type="text/javascript">
    apiready = function() {
        var ajpush = api.require('ajpush');
        // $api.fixStatusBar($api.dom('header'));
        api.setStatusBarStyle({
            style: 'dark',
        });
        funIniGroup();
        api.addEventListener({
            name: 'keyback'
        }, function(ret, err) {
            return; //禁止去登录页
        });

      ReceiveMessage(); //接收极光推送
    }
    function funIniGroup() {
        var eHeaderLis = $api.domAll('header li'),
            frames = [];
        for (var i = 0, len = eHeaderLis.length; i < len; i++) {
            frames.push({
                name: 'frame' + i,
                url: './html/frame' + i + '.html',
                allowEdit: true, //允许复制粘贴功能
                customRefreshHeader: 'UIPullRefreshMotive', //下拉刷新参数
                bgColor: '#fff',
                bounces: false
            })
        }

        var boolean = "true";
        api.openFrameGroup({
            name: 'group',
            bounces: false,
            scrollEnabled: false,
            rect: {
                x: 0,
                y: $api.dom('.tabList').offsetHeight,
                w: api.winWidth,
                h: $api.dom('#main').offsetHeight-20
            },
            index: 0,
            frames: frames
        }, function(ret, err) {
            // console.log(JSON.stringify(ret));
            switch (ret.index) {
                case 0:
                    $('#footer li').removeClass("active")
                    $('#footer li').removeClass("guangchang1")
                    $('#footer li').eq(0).addClass("active");
                    $('header li').removeClass("active");
                    $('header li').eq(0).addClass("active")
                    api.closeFrame({
                        name: "zhibo"
                    });
                    // 监听frame1页面视频
                    api.sendEvent({
                        name: "video"
                    })
                    break;
                case 1:
                    $('#footer li').removeClass("active")
                    $('#footer li').removeClass("guangchang1")
                    $('#footer li').eq(1).addClass("active");
                    $('header li').removeClass("active");
                    $('header li').eq(1).addClass("active");
                    api.closeFrame({
                        name: "zhibo"
                    })
                        // 监听frame0页面视频
                    api.sendEvent({
                        name: "video_index"
                    })
                    // 获取tab栏信息
                    if(boolean=="true"){
                      navtab();
                      boolean="false"
                    }
                    break;
                case 2:
                    $('#footer li').removeClass("active")
                    $('#footer li').eq(2).addClass("active")
                    $('#footer li').eq(2).addClass("guangchang1");
                    api.closeFrame({
                            name: "zhibo"
                        })
                        // 监听frame1页面视频
                    api.sendEvent({
                            name: "video"
                        })
                        // 监听frame0页面视频
                    api.sendEvent({
                        name: "video_index"
                    })
                    break;
                case 3:
                    $('#footer li').removeClass("active")
                    $('#footer li').removeClass("guangchang1")
                    $('#footer li').eq(3).addClass("active");
                    api.openFrame({
                        name: 'zhibo',
                        url: 'https://vzan.com/live/livedetail-35657',
                        rect: {
                            x: 0,
                            y: 20,
                            w: api.winWidth,
                            h: $api.dom('#main').offsetHeight+20
                        },
                        allowEdit: true,
                        bgColor: 'rgba(0,0,0,0)',
                        vScrollBarEnabled: true,
                        hScrollBarEnabled: true
                    });
                    // 监听frame1页面视频
                    api.sendEvent({
                            name: "video"
                        })
                        // 监听frame0页面视频
                    api.sendEvent({
                        name: "video_index"
                    })
                    break;
                case 4:
                    $('#footer li').removeClass("active")
                    $('#footer li').removeClass("guangchang1")
                    $('#footer li').eq(4).addClass("active");
                    api.closeFrame({
                            name: "zhibo"
                        })
                        // 监听frame1页面视频
                    api.sendEvent({
                            name: "video"
                        })
                        // 监听frame0页面视频
                    api.sendEvent({
                        name: "video_index"
                    })
                    break;
            }
        });
    }

    // 随意切换按钮
    function randomSwitchBtn(tag) {
        if (tag == $api.dom('#footer li.active')) return;
        var eFootLis = $api.domAll('#footer li'),
            eHeaderLis = $api.domAll('header li'),
            index = 0;
        for (var i = 0, len = eFootLis.length; i < len; i++) {
            if (tag == eFootLis[i]) {
                index = i;
            } else {
                $api.removeCls(eFootLis[i], 'active');
                $api.removeCls(eFootLis[i], 'guangchang1');
                $api.removeCls(eHeaderLis[i], 'active');
            }
        }
        $api.addCls(eFootLis[index], 'active');
        $api.addCls(eFootLis[index], 'guangchang1');
        $api.addCls(eHeaderLis[index], 'active');
        api.setFrameGroupIndex({
            name: 'group',
            index: index
        });
    }
    // 获取tab栏信息
    var idList = [];
    function navtab() {
      $.ajax({
        type:"get",
        url:dns+"actioncate/read",
        success:function(res){
          var items = [];
          var data = res.data;
          for(var i = 0; i< data.length;i++){
            idList.push(data[i].id)
          };
          // 获取id数组
          // console.log(idList);
          // 获取items数组
          for(var i = 0; i< data.length;i++){
            items.push(data[i].title)
          };
          // console.log(JSON.stringify(items));
          // tab栏渲染
          for(var i = 0; i< data.length;i++){
            var strVar="";
            strVar += "<div class=\"tab_item\" onclick=\"headerSwitchBtn(this)\">"+items[i]+"</div>";
            $("#tabBox").append(strVar)
          };
          $("#tabBox div").eq(0).addClass("active");
          var strVar="";
          strVar += "<div class=\"ab\"><\/div>";
          $("#tabBox div").eq(0).append(strVar);
          api.sendEvent({
              name: "tab_list",
              extra: {
                  key1: idList[0]
              }
          });
          localStorage.setItem("type",idList[0])
        }
      })
    }
    // 点击tab栏
    function headerSwitchBtn(e) {
      var index = $(e).index();
      api.sendEvent({
          name: "tab_list",
          extra: {
              key1: idList[index]
          }
      })
      localStorage.setItem("type",idList[index])
      $(e).siblings().removeClass("active")
      $(e).addClass("active");
      var strVar="";
      strVar += "<div class=\"ab\"><\/div>";
      $(".ab").remove();
      $(e).append(strVar)
    }
    // 搜索
    $("#search_input").on('keypress', function(e) {
        var keycode = e.keyCode;
        //获取搜索框的值
        if (keycode == '13') {
            e.preventDefault();
            //请求搜索接口
            var search = $("#search_input").val();
            if (search == '') {
              api.sendEvent({
                  name: "search_tosat"
              })
                return false;
            };
            localStorage.setItem("search", search);
            // 跳转到其它页面暂停当前页面的视频
            getvideo()
            api.openWin({
                name: 'search',
                url: 'html/frame0/search.html',
                allowEdit: true,
                bgColor: '#fff',
                pageParam: {}, //页面代参数
                rect: {
                    x: 0,
                    y: 0,
                    w: api.winWidth,
                    h: api.winHeight
                }
            });
        }
    });
    $("#searchText").click(function() {
        var search = $("#search_input").val();
        if (search == '') {
          api.sendEvent({
              name: "search_tosat"
          })
            return false;
        };
        localStorage.setItem("search", search);
        // 跳转到其它页面暂停当前页面的视频
        getvideo()
        api.openWin({
            name: 'search',
            url: 'html/frame0/search.html',
            allowEdit: true,
            bgColor: '#fff',
            pageParam: {}, //页面代参数
            rect: {
                x: 0,
                y: 0,
                w: api.winWidth,
                h: api.winHeight
            }
        });
    })
    $("#quxiao").click(function() {
        $("#search_input").val('')
    });
    function getvideo() {
        // 跳转到其它页面暂停当前页面的视频
        var videoList = document.getElementsByTagName("video");
        for (var i = 0; i < videoList.length; i++) {
            if (!videoList[i].paused) {
                videoList[i].pause(); //暂停控制
            }
        }
    }
</script>
